<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">

        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    num: [1, 2, 3, 4, 5, 6, 100, 200, 300, 400]
                },
                methods: {
                    allFuntion() {
                        // 1. 需求：取出所有小于100的数字
                        /**
                            使用基础方法
                        */
                        let tempArr1 = []
                        for (let n of this.num) {
                            if (n < 100) {
                                tempArr1.push(n)
                            }
                        }
                        /**
                            ## 使用filter()函数
                                - filter函参是一个回调函数，遍历数组的每一个值
                                - 这个回调函数每次都会返回一个boolan值，如果true会把遍历的值加到新数组，否则不作处理
                                - 可以在回调函数里进行逻辑处理，进行数据筛选
                        */
                        let tempArr2 = []
                        tempArr2 = this.num.filter(function(n) {
                            return n < 100
                        })

                        //2. 需求：给数组里的所有元素乘2
                        /**
                            使用基础方法
                        */
                        let tempArr3 = []
                        for (let n of this.num) {
                            tempArr3.push(n * 2)
                        }
                        /**
                            ## 使用map()函数
                                - 它的函参也是一个回调函数
                                - 这个回调函数会返回的就是每次遍历的数据
                                - 可以对数据处理，然后返回新的数据
                        */
                        let tempArr4 = []
                        tempArr4 = this.num.map(function(n) {
                            return n * 2
                        })

                        //3. 需求：计算数组中数据的和
                        let count1 = 0
                        for (let n of this.num) {
                            count1 += this.num
                        }
                        /**
                            ## reduce函数
                                1. 两个参数
                                    - 第一个参数：函数：有两个参数：前一次遍历的值；当前遍历的值
                                    - 第二个参数：初始值，默认是0
                                2. 最终会返回一个值
                        */
                        let count2 = this.num.reduce(function(preValue, n) {
                            return preValue + n
                        }, 0)

                        //4. 组合需求：直接求上面所有东西
                        let total = this.num.filter(function(n) {
                            return n < 100
                        }).map(function(n) {
                            return n * 2
                        }).reduce(function(preValue, n) {
                            return preValue + n
                        }, 0)

                        //终极写法，用lambda表达式
                        let total = this.num.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => n + preValue)


                    }
                },
            })
        </script>
    </body>
</html>